<form id="addTypeForm">
<div style="padding:30px" class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">类型名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-tab layui-tab-brief">

        <ul class="layui-tab-title">
            <li class="layui-this">商品参数</li>
            <li>商品属性</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-size="sm">
                    <thead>
                    <tr>
                        <th>参数名称</th>
                        <th>参数类型</th>
                        <th>参数选项</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="params_view">
                    <tr data-id="0">
                        <td>
                            <input type="hidden" name="params_id[0]" value="">
                            <input type="text" name="params_name[0]" required value="" lay-verify="required"
                                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <select name="params_type[0]" id="type">
                                <option value="text">文本框</option>
                                <option value="radio">单选框</option>
                                <option value="checkbox">复选框</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" name="params_value[0]" value=""
                                    placeholder="空格分隔" autocomplete="off"
                                   class="layui-input seller-inline-1">
                        </td>
                        <td>
                            <a class="layui-btn layui-btn-xs select-params-class">
                                选择
                            </a>
                            <a class="layui-btn layui-btn-xs add-params-class">
                                添加
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
            <div class="layui-tab-item">

                <div class="layui-tab-item layui-show">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th>属性名称</th>
                            <th>排序</th>
                            <th>属性值</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="type_view">
                        <tr data-id="0">
                            <td>
                                <input type="hidden" name="type_id[0]" value="">
                                <input type="text" name="type_name[0]" required value="" lay-verify="required"
                                       placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" name="type_sort[0]" required value="100" lay-verify="required"
                                       placeholder="" autocomplete="off" class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <input type="text" name="type_value[0]" required value=""
                                       lay-verify="required" placeholder="空格分隔" autocomplete="off"
                                       class="layui-input seller-inline-1">
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs select-type-class">
                                    选择
                                </a>
                                <a class="layui-btn layui-btn-xs add-type-class">
                                    添加
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
<!--
    <button class="layui-btn layui-btn-fluid add-save-btn">保存</button>
-->
</div>

</form>


<script id="params_tpl" type="text/html">
    <tr data-id="{{ d.id }}">
        <td>
            <input type="hidden" name="params_id[{{ d.id }}]" value="">

            <input type="text" name="params_name[{{ d.id }}]" required value="" lay-verify="required"
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <select name="params_type[{{ d.id }}]">
                <option value="text">文本框</option>
                <option value="radio">单选框</option>
                <option value="checkbox">复选框</option>
            </select>
        </td>
        <td>
            <input type="text" name="params_value[{{ d.id }}]" value=""
                    placeholder="空格分隔" autocomplete="off"
                   class="layui-input seller-inline-1">
        </td>
        <td>
            <a class="layui-btn layui-btn-xs select-params-class">
                选择
            </a>
            <a class="layui-btn layui-btn-xs add-params-class">
                添加
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs del-params-class">
                删除
            </a>
        </td>
    </tr>
</script>


<script id="type_l_tpl" type="text/html">
    <tr data-id="{{ d.id }}">
        <td>
            <input type="hidden" name="type_id[{{ d.id }}]" value="">

            <input type="text" name="type_name[{{ d.id }}]" required value="" lay-verify="required"
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <input type="text" name="type_sort[{{ d.id }}]" required value="100" lay-verify="required"
                   placeholder="" autocomplete="off" class="layui-input seller-inline-1">
        </td>
        <td>
            <input type="text" name="type_value[{{ d.id }}]" required value=""
                   lay-verify="required" placeholder="空格分隔" autocomplete="off"
                   class="layui-input seller-inline-1">
        </td>
        <td>
            <a class="layui-btn layui-btn-xs select-type-class">
                选择
            </a>
            <a class="layui-btn layui-btn-xs add-type-class">
                添加
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs del-type-class">
                删除
            </a>
        </td>
    </tr>
</script>

<script>
    //渲染表单
    layui.use(['form','table'], function(){
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;

        form.render();


        $(".layui-tab").on('click', '.add-type-class', function (e) {
            var getTpl = type_l_tpl.innerHTML;
            var lastId = $(this).parent().parent().parent().find('tr').last().attr('data-id');

            var tmpData = {};
            tmpData.id = parseInt(lastId) + 1;
            laytpl(getTpl).render(tmpData, function (html) {
                $("#type_view").append(html);
            });
            form.render();

        });

        $(".layui-tab").on('click', '.add-params-class', function (e) {
            var getTpl = params_tpl.innerHTML;
            var lastId = $(this).parent().parent().parent().find('tr').last().attr('data-id');

            var tmpData = {};
            tmpData.id = parseInt(lastId) + 1;
            laytpl(getTpl).render(tmpData, function (html) {
                $("#params_view").append(html);
            });
            form.render();

        });

        $(".layui-tab").on('click', '.del-type-class,.del-params-class', function (e) {
            $(this).parent().parent().remove();
        })
        //选择已有参数
        var selectParamsId = 0;
        $(".layui-tab").on('click','.select-params-class',function (e) {
            selectParamsId = $(this).parent().parent().attr('data-id');
            JsGet("{:url('GoodsParams/getlist')}",function(e){
                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['700px', '450px'],
                    title:'参数列表'
                });
            });
        });
        //监听商品列表页工具条
        table.on('tool(paramsTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'selectParams'){ //选择
                $("input[name='params_id["+selectParamsId+"]']").val(data.id);
                $("input[name='params_name["+selectParamsId+"]']").val(data.name);
                $("input[name='params_value["+selectParamsId+"]']").val(data.value);
                $("select[name='params_type["+selectParamsId+"]']").val(data.type);
                form.render('select');
                layer.close(window.box);
            }
        });

        //选择已有属性
        var selectTypeId = 0;
        $(".layui-tab").on('click','.select-type-class',function (e) {
            selectTypeId = $(this).parent().parent().attr('data-id');
            JsGet("{:url('GoodsTypeSpec/getlist')}",function(e){
                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['700px', '450px'],
                    title:'参数列表'
                });
            });
        });
        //监听商品列表页工具条
        table.on('tool(typeTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'selectType'){ //选择
                var value = '';
                if(data.spec_value.length>0){
                    $.each(data.spec_value,function (i,j) {
                        value+=j.value+" ";
                    });
                    value = value.substr(0, value.length - 1);
                }
                $("input[name='type_id["+selectParamsId+"]']").val(data.id);
                $("input[name='type_name["+selectTypeId+"]']").val(data.name);
                $("input[name='type_value["+selectTypeId+"]']").val(value);
                $("select[name='type_sort["+selectTypeId+"]']").val(data.sort);
                form.render('select');
                layer.close(window.box);
            }
        });

    });


</script>